<template>
  <view>
    <u-navbar
      title="确认完成"
      rightIcon="kefu-ermai"
      @rightClick="rightClick"
      :autoBack="true"
    >
    </u-navbar>
    <view class="confirm-success-counter">
      <view class="top-status">
        <view class="status-item" :class="{ active: selectStatus == 1 }"
          >1、上传完工图</view
        >
        <view class="status-item" :class="{ active: selectStatus == 2 }"
          >2、确认完工</view
        >
      </view>
      <view class="center-counter">
        <view v-if="selectStatus == 1">
          <view class="finished-photo">
            <view class="finished-title">
              <view class="title-text"
                >完工照片<text class="explain">(上传个数2-10)</text></view
              >
              <view class="example">示例图</view>
            </view>
            <view class="photo-explain"
              >每种商品至少上传2张清晰的不同角度的完工度</view
            >
            <view class="image-counter">
              <text
                class="iconfont icon-icon-upload_img"
                @click="handleUploadImage"
              ></text>
              <view class="items-img">
                <image src="https://cdn.uviewui.com/uview/album/1.jpg" alt="" />
                <view class="close-icon">
                  <u-icon
                    name="close-circle-fill"
                    size="22"
                    color="#da5947"
                  ></u-icon>
                </view>
              </view>
            </view>
          </view>
          <view class="finished-photo" style="margin-top: 20rpx">
            <view class="finished-title">
              <view class="title-text">完工视频</view>
            </view>
            <view class="image-counter">
              <text
                class="iconfont icon-icon-upload_img"
                @click="handleUploadImage"
              ></text>
              <view class="items-img">
                <image src="https://cdn.uviewui.com/uview/album/1.jpg" alt="" />
                <view class="close-icon">
                  <u-icon
                    name="close-circle-fill"
                    size="22"
                    color="#da5947"
                  ></u-icon>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="bottom-counter">
        <view class="bottom-photo-explain"
          >上传多角度的美观图片，向商家全面展现您的技术吧</view
        >
        <view class="next-step" @click="handleNextStep">下一步 确认完工</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectStatus: 1,
    };
  },
  mounted() {},
  methods: {
    //
    rightClick() {},
    handleNextStep() {
      this.selectStatus = 2;
    },
  },
};
</script>

<style lang="scss" scoped>
.confirm-success-counter {
  height: calc(100vh - 80rpx);
  margin-top: 80rpx;
  background: #f2f3f8;
  display: flex;
  flex-direction: column;

  .top-status {
    padding: 24rpx;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .status-item {
      padding: 14rpx 80rpx;
      background: #f7f8fa;
      border-radius: 12rpx;
      font-size: 24rpx;
      &.active {
        background: #e9f6fc;
        color: #51ade6;
      }
    }
  }
  .center-counter {
    flex: 1;
    padding: 20rpx;
    overflow: auto;
    .finished-photo {
      padding: 12rpx 24rpx;
      background: #fff;
      border-radius: 12rpx;
      .finished-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title-text {
          color: #000;
          font-size: 30rpx;
          .explain {
            color: #999;
            font-size: 24rpx;
          }
        }
        .example {
          color: #51ade6;
          font-size: 24rpx;
        }
      }
      .photo-explain {
        font-size: 24rpx;
        color: #999;
      }
      .image-counter {
        margin-top: 20rpx;
        display: flex;
        // align-items: center;
        gap: 24rpx 24rpx;
        flex-wrap: wrap;
        .icon-icon-upload_img {
          color: #e5e5e5;
          font-size: 156rpx;
        }
        .items-img {
          width: 160rpx;
          height: 160rpx;
          position: relative;
          image {
            width: 100%;
            height: 100%;
            border-radius: 16rpx;
          }
          .close-icon {
            position: absolute;
            right: -8px;
            top: -8px;
          }
        }
      }
    }
  }
  .bottom-counter {
    padding: 12rpx 24rpx;
    background: #fff;
    .bottom-photo-explain {
      font-size: 24rpx;
      color: #999;
      text-align: center;
    }
    .next-step {
      padding: 16rpx 24rpx;
      background: #50ace8;
      border-radius: 16rpx;
      color: #fff;
      font-size: 28rpx;
      text-align: center;
      margin-top: 24rpx;
    }
  }
}
</style>
